<template>
  <div class="page-box">
 
    <BaseElTable :historyDataTables="tableData" @selectChange="selectChange">
      <el-table-column prop="机组名称" width="50px" align="center">
        <!-- <template slot-scope="scope">
          {{ scope.row.机组名称 + "\n日\n运\n行\n分\n析" }}
        </template> -->
      </el-table-column>
      <el-table-column prop="时间" label="时间" width="100px" align="center">
        <template slot-scope="scope">{{ getTime(scope.row.时间) }}</template>
      </el-table-column>
      <el-table-column prop="机组状态描述" label="状态" align="center">
        <!-- <template slot-scope="{ row }"
          ><el-input v-model="row.机组状态描述" 
        /></template> -->
      </el-table-column>
      <el-table-column label="有功" align="center">
        <el-table-column prop="有功功率" label="MW" align="center">
        </el-table-column>
      </el-table-column>
      <el-table-column label="无功" align="center">
        <el-table-column prop="无功功率" label="MVar" align="center">
        </el-table-column>
      </el-table-column>
      <el-table-column label="导叶" align="center">
        <el-table-column prop="导叶开度" label="%" align="center">
        </el-table-column>
      </el-table-column>

      <el-table-column
        prop="定子绕组温度"
        label="定子绕组\n最高℃"
        align="center"
      >
      </el-table-column>
      <el-table-column label="定子铁芯" align="center">
        <el-table-column prop="定子铁芯温度" label="最高℃" align="center">
        </el-table-column>
      </el-table-column>
      <el-table-column label="推力瓦" align="center">
        <el-table-column prop="推力瓦温" label="最高℃" align="center">
        </el-table-column>
      </el-table-column>
      <el-table-column label="下导瓦" align="center">
        <el-table-column prop="下导瓦温" label="最高℃" align="center">
        </el-table-column>
      </el-table-column>
      <el-table-column label="水导瓦" align="center">
        <el-table-column prop="水导瓦温" label="最高℃" align="center">
        </el-table-column>
      </el-table-column>
      <el-table-column label="上导瓦" align="center">
        <el-table-column prop="上导瓦温" label="最高℃" align="center">
        </el-table-column>
      </el-table-column>

      <el-table-column label="发电机冷风" align="center">
        <el-table-column prop="" label="最高℃" align="center">
        </el-table-column>
      </el-table-column>
      <el-table-column label="机组冷却水" align="center">
        <el-table-column prop="" label="最高℃" align="center">
        </el-table-column>
      </el-table-column>
      <el-table-column label="主变冷却水" align="center">
        <el-table-column prop="" label="最高℃" align="center">
        </el-table-column>
      </el-table-column>
      <el-table-column label="机组减压阀后" align="center">
        <el-table-column prop="" label="压力MPa" align="center">
        </el-table-column>
      </el-table-column>
      <el-table-column label="主变减压阀后" align="center">
        <el-table-column prop="" label="压力MPa" align="center">
        </el-table-column>
      </el-table-column>
      <el-table-column label="水封" align="center">
        <el-table-column prop="" label="流量 m3/h" align="center">
        </el-table-column>
      </el-table-column>
      <el-table-column label="压油罐" align="center">
        <el-table-column prop="" label="油价 mm" align="center">
        </el-table-column>
      </el-table-column>
      <el-table-column label="压油罐" align="center">
        <el-table-column prop="" label="压力MPa" align="center">
        </el-table-column>
      </el-table-column>
      <el-table-column label="主变A相" align="center">
        <el-table-column prop="主变A相油温" label="油温℃" align="center">
        </el-table-column>
      </el-table-column>
      <el-table-column label="主变B相" align="center">
        <el-table-column prop="主变B相油温" label="油温℃" align="center">
        </el-table-column>
      </el-table-column>
      <el-table-column label="主变C相" align="center">
        <el-table-column prop="主变C相油温" label="油温℃" align="center">
        </el-table-column>
      </el-table-column>
      <el-table-column label="主变A相" align="center">
        <el-table-column prop="" label="油位" align="center"> </el-table-column>
      </el-table-column>
      <el-table-column label="主变B相" align="center">
        <el-table-column prop="" label="油位" align="center"> </el-table-column>
      </el-table-column>
      <el-table-column label="主变C相" align="center">
        <el-table-column prop="" label="最高℃" align="center">
        </el-table-column>
      </el-table-column>
    </BaseElTable>
    <ChartPopover ref="ChartPopover" :checkList="checkList"/>
  </div>
</template>

<script>
import BaseElTable from "./components/BaseElTable01.vue";
import ChartPopover from './components/ChartPopover.vue'
import { mockData } from "./mock";
import moment from "moment";
export default {
  components: {
    BaseElTable,
    ChartPopover
  },
  data() {
    return {
      tableData: [],
      checkList:[]
    };
  },
  mounted() {
    console.log("mockData", mockData);
    const list = [];
    for (let k in mockData) {
      list.push(...mockData[k]);
      list.push({
        机组名称: k,
        时间: "日分析",
        机组状态描述: "√",
        有功功率: "√",
        无功功率: "√",
        导叶开度: "√",
        定子绕组温度: "√",
        定子铁芯温度: "√",
        推力瓦温: "√",
        下导瓦温: "√",
        水导瓦温: "√",
        上导瓦温: "√",
        主变A相油温: "√",
        主变B相油温: "√",
        主变C相油温: "√",
      });
    }
    // console.log("list", list);
    // 根据机组时间 二维排序
    list.sort((a, b) => {
      return parseInt(a.机组名称) - parseInt(b.机组名称);
    });
    this.tableData = list;
  },
  methods: {
    selectChange() {
      const checkList = this.tableData.filter(
        (item) => item.checkArr && item.checkArr.length > 0
      );
      console.log("selectChange", checkList);
      //   console.log("selectChange", this.tableData);
      this.checkList = checkList
    },
    getTime(time) {
      if (time == "日分析") {
        return time;
      } else {
        return moment(time).format("HH:mm:ss");
      }
    },
    /* 表格合并列和行 */
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.flitterData(this.tableData).one[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    } /**合并表格的第一列，处理表格数据 */,
    flitterData(arr) {
      let spanOneArr = [];
      let concatOne = 0;
      arr.forEach((item, index) => {
        if (index === 0) {
          spanOneArr.push(1);
        } else {
          //注意这里的quarterly是表格绑定的字段，根据自己的需求来改
          if (item.机组名称 === arr[index - 1].机组名称) {
            //第一列需合并相同内容的判断条件
            spanOneArr[concatOne] += 1;
            spanOneArr.push(0);
          } else {
            spanOneArr.push(1);
            concatOne = index;
          }
        }
      });
      return {
        one: spanOneArr,
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.page-box{
    position: relative;
}

// ::v-deep {
//   .left-table .el-table__header {
//     height: 103px;
//   }
// }
// .page-box {
//   width: 100%;
//   height: 100%;
//   border: 1px solid red;
//   display: flex;
//   .left-table {
//     flex: none;
//     width: 50px !important;
//   }
//   .right-table {
//     flex: 1;
//     width: calc(100% - 150px);
//   }
// }
</style>
